<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>航班管理 - 航空订票系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <style>
        .page-header {
            background: linear-gradient(135deg, #1a237e, #3949ab);
            color: white;
            padding: 3rem 0;
            margin-bottom: 2rem;
            border-radius: 0 0 20px 20px;
            position: relative;
            overflow: hidden;
        }
        
        .page-header::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }
        
        .page-header::after {
            content: '';
            position: absolute;
            bottom: -80px;
            left: -80px;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
        }
        
        .page-title {
            font-weight: 700;
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
            position: relative;
            z-index: 1;
        }
        
        .breadcrumb {
            background-color: transparent;
            padding: 0;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
        }
        
        .breadcrumb-item + .breadcrumb-item::before {
            content: "›";
            color: rgba(255, 255, 255, 0.7);
        }
        
        .breadcrumb-item.active {
            color: rgba(255, 255, 255, 0.9);
        }
        
        .breadcrumb-item a {
            color: white;
        }
        
        .flight-item {
            transition: all 0.3s ease;
            border-radius: 15px;
            overflow: hidden;
            margin-bottom: 1.5rem;
        }
        
        .flight-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .flight-item .card-body {
            padding: 1.5rem;
        }
        
        .flight-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }
        
        .flight-route {
            display: flex;
            align-items: center;
            position: relative;
            padding: 1rem 0;
        }
        
        .flight-route::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 75px;
            right: 75px;
            height: 2px;
            background: linear-gradient(90deg, #e3f2fd, #3949ab, #e3f2fd);
            z-index: 0;
        }
        
        .route-point {
            width: 12px;
            height: 12px;
            background-color: #3949ab;
            border-radius: 50%;
            z-index: 1;
            position: relative;
        }
        
        .route-details {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }
        
        .city-info {
            text-align: center;
            padding: 0 1rem;
            position: relative;
            z-index: 1;
        }
        
        .city-code {
            font-size: 0.8rem;
            color: #6c757d;
        }
        
        .flight-time {
            display: flex;
            justify-content: center;
            width: 100%;
            position: relative;
            z-index: 1;
            background-color: white;
            padding: 0 1rem;
        }
        
        .flight-duration {
            font-size: 0.8rem;
            color: #6c757d;
            text-align: center;
        }
        
        .flight-price {
            font-size: 1.5rem;
            font-weight: 700;
            color: #3949ab;
        }
        
        .flight-seats {
            font-size: 0.9rem;
        }
        
        .alert-message {
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        @media (max-width: 767.98px) {
            .page-title {
                font-size: 2rem;
            }
            
            .flight-route {
                flex-direction: column;
                padding: 1.5rem 0;
            }
            
            .route-details {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .city-info {
                margin-bottom: 1rem;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                width: 100%;
            }
            
            .flight-route::after {
                display: none;
            }
            
            .route-point {
                margin-right: 0.5rem;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/flightbooking/"><i class="fas fa-plane mr-2"></i>航空订票系统</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/"><i class="fas fa-home mr-1"></i> 首页</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="/flightbooking/flights"><i class="fas fa-plane-departure mr-1"></i> 航班管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/passengers"><i class="fas fa-users mr-1"></i> 旅客管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/tickets"><i class="fas fa-ticket-alt mr-1"></i> 票务管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/dashboard"><i class="fas fa-chart-line mr-1"></i> 统计面板</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0 d-none d-lg-flex">
                    <div class="input-group">
                        <input class="form-control" type="search" placeholder="快速搜索" aria-label="Search">
                        <div class="input-group-append">
                            <button class="btn btn-light" type="submit"><i class="fas fa-search"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </nav>

    <div class="page-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1 class="page-title animate__animated animate__fadeInUp">航班管理</h1>
                    <nav aria-label="breadcrumb" class="animate__animated animate__fadeInUp animate__delay-1s">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/flightbooking/"><i class="fas fa-home"></i> 首页</a></li>
                            <li class="breadcrumb-item active" aria-current="page">航班管理</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-md-6 text-right">
                    <a href="/flightbooking/flights/add" class="btn btn-light btn-lg animate__animated animate__fadeInUp animate__delay-1s">
                        <i class="fas fa-plus-circle mr-2"></i>添加航班
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="container mt-4">
        <!-- 成功消息提示 -->
        <div class="alert alert-success alert-dismissible fade show alert-message animate__animated animate__fadeInUp" role="alert" th:if="${successMessage}">
            <i class="fas fa-check-circle mr-2"></i> <span th:text="${successMessage}"></span>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        
        <!-- 错误消息提示 -->
        <div class="alert alert-danger alert-dismissible fade show alert-message animate__animated animate__fadeInUp" role="alert" th:if="${errorMessage}">
            <i class="fas fa-exclamation-circle mr-2"></i> <span th:text="${errorMessage}"></span>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <div class="card mb-4 animate__animated animate__fadeInUp">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-search mr-2"></i>航班搜索</h5>
            </div>
            <div class="card-body">
                <form action="/flightbooking/flights/search" method="get">
                    <div class="form-row">
                        <div class="form-group col-md-4">
                            <label for="departureCity"><i class="fas fa-plane-departure mr-1"></i>出发城市</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
                                </div>
                                <input type="text" class="form-control" id="departureCity" name="departureCity" placeholder="例如：北京" required>
                            </div>
                        </div>
                        <div class="form-group col-md-4">
                            <label for="arrivalCity"><i class="fas fa-plane-arrival mr-1"></i>到达城市</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
                                </div>
                                <input type="text" class="form-control" id="arrivalCity" name="arrivalCity" placeholder="例如：上海" required>
                            </div>
                        </div>
                        <div class="form-group col-md-2">
                            <label for="departureDate"><i class="far fa-calendar-alt mr-1"></i>出发日期</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="far fa-calendar"></i></span>
                                </div>
                                <input type="date" class="form-control" id="departureDate" name="departureDate">
                            </div>
                        </div>
                        <div class="form-group col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary btn-block shadow-sm"><i class="fas fa-search mr-1"></i> 搜索</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <h4 class="mb-3 text-primary"><i class="fas fa-list-alt mr-2"></i>航班列表</h4>
        
        <div class="row animate__animated animate__fadeInUp animate__delay-1s" th:if="${not #lists.isEmpty(flights)}">
            <div class="col-12" th:each="flight : ${flights}">
                <div class="card flight-item">
                    <div class="card-body">
                        <div class="flight-info">
                            <div>
                                <h5 class="text-primary mb-1" th:text="${flight.flightId}">CA1234</h5>
                                <p class="text-muted mb-0" th:text="${flight.airlineCompany}">中国国际航空</p>
                            </div>
                            <div class="text-right">
                                <div class="flight-price mb-1">¥<span th:text="${flight.basePrice}">1200.00</span></div>
                                <div class="flight-seats">
                                    <i class="fas fa-chair mr-1"></i>
                                    <span th:if="${flight.remainingSeats > 20}" class="text-success" th:text="${flight.remainingSeats}">150</span>
                                    <span th:if="${flight.remainingSeats <= 20 && flight.remainingSeats > 0}" class="text-warning" th:text="${flight.remainingSeats}">15</span>
                                    <span th:if="${flight.remainingSeats <= 0}" class="text-danger">已满</span>
                                    <span class="text-muted">/<span th:text="${flight.capacity}">180</span></span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="flight-route">
                            <div class="route-details">
                                <div class="city-info">
                                    <div class="route-point"></div>
                                    <div class="ml-2">
                                        <div class="h5 mb-0" th:text="${flight.departureCity}">北京</div>
                                        <div class="city-code" th:text="${#dates.format(flight.departureTime, 'HH:mm')}">08:00</div>
                                        <div class="city-code" th:text="${#dates.format(flight.departureTime, 'yyyy-MM-dd')}">2023-07-01</div>
                                    </div>
                                </div>
                                
                                <div class="flight-time">
                                    <div class="flight-duration">
                                        <i class="fas fa-plane text-primary"></i>
                                        <div>直飞</div>
                                    </div>
                                </div>
                                
                                <div class="city-info text-right">
                                    <div class="mr-2">
                                        <div class="h5 mb-0" th:text="${flight.arrivalCity}">上海</div>
                                        <div class="city-code" th:text="${#dates.format(flight.arrivalTime, 'HH:mm')}">10:30</div>
                                        <div class="city-code" th:text="${#dates.format(flight.arrivalTime, 'yyyy-MM-dd')}">2023-07-01</div>
                                    </div>
                                    <div class="route-point"></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-end mt-3">
                            <div class="btn-group">
                                <a th:href="@{/flights/{id}(id=${flight.flightId})}" class="btn btn-info">
                                    <i class="fas fa-info-circle mr-1"></i> 详情
                                </a>
                                <a th:href="@{/flights/edit/{id}(id=${flight.flightId})}" class="btn btn-warning text-white">
                                    <i class="fas fa-edit mr-1"></i> 编辑
                                </a>
                                <a th:href="@{/flights/delete/{id}(id=${flight.flightId})}" class="btn btn-danger" 
                                   onclick="return confirm('确定要删除此航班吗？')">
                                    <i class="fas fa-trash-alt mr-1"></i> 删除
                                </a>
                                <a th:if="${flight.remainingSeats > 0}" th:href="@{/tickets/book/{id}(id=${flight.flightId})}" class="btn btn-success">
                                    <i class="fas fa-ticket-alt mr-1"></i> 订票
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card animate__animated animate__fadeInUp animate__delay-1s" th:if="${#lists.isEmpty(flights)}">
            <div class="card-body text-center py-5">
                <i class="fas fa-plane-slash fa-4x text-muted mb-3"></i>
                <h4 class="text-muted">暂无航班信息</h4>
                <p class="mb-3">当前没有符合条件的航班，请尝试调整搜索条件或添加新航班。</p>
                <a href="/flightbooking/flights/add" class="btn btn-primary mt-2">
                    <i class="fas fa-plus-circle mr-1"></i> 添加航班
                </a>
            </div>
        </div>
    </div>

    <footer class="bg-dark text-light mt-5 py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-4 text-center text-md-left mb-3 mb-md-0">
                    <h5><i class="fas fa-plane mr-2"></i>航空订票系统</h5>
                    <p class="mb-0">提供便捷、高效的航班预订服务</p>
                </div>
                <div class="col-md-4 text-center mb-3 mb-md-0">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="/flightbooking/flights" class="text-light"><i class="fas fa-angle-right mr-2"></i>航班查询</a></li>
                        <li><a href="/flightbooking/passengers" class="text-light"><i class="fas fa-angle-right mr-2"></i>旅客管理</a></li>
                        <li><a href="/flightbooking/tickets" class="text-light"><i class="fas fa-angle-right mr-2"></i>机票预订</a></li>
                    </ul>
                </div>
                <div class="col-md-4 text-center text-md-right">
                    <h5>联系我们</h5>
                    <p class="mb-0">客服热线: 400-123-4567</p>
                    <div class="mt-3">
                        <a href="#" class="text-light mr-3"><i class="fab fa-weixin fa-lg"></i></a>
                        <a href="#" class="text-light mr-3"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="text-light"><i class="fas fa-envelope fa-lg"></i></a>
                    </div>
                    <p class="mt-3 mb-0">© 2023 航空订票系统 - JZA04</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/main.js"></script>
</body>
</html>